<template>
  <view class="">
    <u-swiper
      :list="list"
      indicator-pos="bottomRight"
      mode="number"
      :height="750"
      :border-radius="0"
    ></u-swiper>

    <view class="info">
      <view class="miaomi">喵咪</view>
      <view class="title">{{ receiveData.title }}</view>
      <view class="kucun">库存：{{ totalStock }}</view>
      <view class="operater">
        <view class="price">
          <view>￥</view>
          <view>{{ receiveData.price }}</view>
        </view>
        <!-- <view class="stock">
          <view
            class="iconfont icon-jian"
            style="font-size: 46rpx; margin-right: 40rpx; color: #cfcfcf"
            @click="$refs.MoreKinds.show = true"
          ></view>
          <view style="font-size: 36rpx">{{ receiveData.buyNum }}</view>
          <view
            class="iconfont icon-add-fill"
            style="font-size: 50rpx; color: #d95c48; margin-left: 40rpx"
            @click="$refs.MoreKinds.show = true"
          ></view>
        </view> -->
      </view>
    </view>

    <view class="goods-detail">
      <!-- <view class="title"> 产品详情 </view> -->
      <image
        :src="receiveData.detail"
        style="width: 100vw"
        mode="widthFix"
        @click="preImage(0, [receiveData.detail])"
      ></image>
    </view>
    <!-- 加入购物车 -->
    <view class="car-bottom">
      <view @click="toCar">
        <view class="icon-jinhuo iconfont icon"></view>
        <view>
          总价 <span>￥{{ totalMoney / 10000 }}</span></view
        >
      </view>
      <view @click="$refs.MoreKinds.show = true" class="put-car">
        加入购物车
      </view>
    </view>
    <!-- 多规格弹窗 -->
    <more-kind
      ref="MoreKinds"
      :goods="receiveData"
      :merchant_id="merchant_id"
    ></more-kind>
  </view>
</template>

<script>
import MoreKind from "./more-kind.vue";
export default {
  onLoad(params) {
    this.merchant_id = params.merchant_id;
    console.log(this.vuex_car_list);
    this.getGoodsDetail(params);
  },
  components: {
    MoreKind,
  },
  data() {
    return {
      navBar: {
        background: {
          backgroundColor: "rgb(255,255,255,1)",
        },
        immersive: false,
        navTitle: "商品详情",
        navBd: false,
      },
      list: [],
      receiveData: {},
      totalStock: 0, //库存
      merchant_id: null,
      totalMoney: 0,
    };
  },
  watch: {
    vuex_car_list: {
      handler(newV, oldV) {
        console.log(newV);
        this.totalMoney = 0;
        if (newV.length > 0) {
          newV.map((v) => {
            this.totalMoney += v.number * Number.parseFloat(v.price) * 100;
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    /**
     * 获取商品详情
     */
    getGoodsDetail(data) {
      this.$u.api.goodsDetailAapi(data).then((res) => {
        this.receiveData = res;
        // 轮播
        this.receiveData.banners.map((v) => {
          this.list.push({
            image: v,
          });
        });
        //库存
        this.receiveData.items.map((v) => {
          this.totalStock += Number.parseInt(v.storage);
          // 初始化buyNum = 0
          v.buyNum = 0;
          this.vuex_car_list.map((v1) => {
            // 判断sku是否存在
            if (v1.goods_item_id === v.goods_item_id) {
              v.buyNum += v1.number;
            }
          });
        });
        // 默认spu数量未0
        this.receiveData.buyNum = 0;
        this.vuex_car_list.map((v1) => {
          // 判断spu数据
          if (this.receiveData.goods_id === v1.goods_id) {
            this.receiveData.buyNum += v1.number;
          }
        });
        // console.log(this.receiveData);
      });
    },
    toCar() {
      // 购物车为空则不能进去
      if(this.vuex_car_list.length === 0) {
        this.$u.toast("购物车为空！")
        return
      }
      uni.navigateTo({
        url: "/pages/shop/component/car?merchant_id=" + this.merchant_id,
      });
    },
    preImage(index, list) {
      uni.previewImage({
        index: index,
        urls: list,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.car-bottom {
  position: fixed;
  bottom: 0;
  width: 100vw;
  padding: 40rpx 40rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1rpx solid #f6f6f6;
  background-color: #ffffff;
  & > view:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24rpx;
    span {
      color: #d36c5f;
    }
  }
  .put-car {
    // background-color: #d3796d;
    background-image: linear-gradient(to right, #d3796d, #d36c5f);
    height: 78rpx;
    line-height: 78rpx;
    text-align: center;
    color: #ffffff;
    font-size: 36rpx;
    flex: 1;
    border-radius: 50rpx;
  }
  .icon {
    width: 180rpx;
    text-align: center;
    font-size: 45rpx;
  }
}

.info {
  padding: 22rpx 51rpx;
  .miaomi {
    border-radius: 30rpx;
    width: 70rpx;
    height: 34rpx;
    background-color: #fe2f67;
    font-size: 24rpx;
    line-height: 34rpx;
    text-align: center;
    color: #ffffff;
  }
  .title {
    color: #000000;
    font-size: 36rpx;
    font-weight: bold;
  }
  .kucun {
    color: #969799;
    font-size: 24rpx;
  }
  .operater {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    .price {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      color: #cd5546;
      font-weight: bold;
      & > view:nth-child(1) {
        font-size: 28rpx;
        margin-right: 10rpx;
        margin-top: 23rpx;
      }
      & > view:nth-child(2) {
        font-size: 58rpx;
      }
    }
    .stock {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
.goods-detail {
  margin-top: 20rpx;
  min-height: 70vh;
  margin-bottom: 150rpx;
  .title {
    color: #12202e;
    font-size: 32rpx;
    text-align: center;
    font-weight: bold;
    padding-bottom: 10rpx;
  }
}
</style>
